<template>
	<div style="padding-bottom:20px;">
		<div>
			<van-row style="display: flex; align-items: center;" v-for="(item,i) in productItems" :key="i">
				<van-col span="1" offset="1" style="font-size: 20px;font-weight: bolder; margin-top: 0.5rem;">{{item.id}}
				</van-col>
				<van-col span="4" offset="1">
					<img :src='APIDomainName + item.pic' class="tp">
				</van-col>
				<van-col class="wen" span="7" offset="1">
					<div>{{item.title}}</div>
					<div style="margin-top: 0.5rem;font-size: 12px;color: #969799;">{{item.details}}</div>
				</van-col>
				<van-col span="6" style="text-align: end;" offset="2">
					<van-button round @click="onDetail(item.product_id)"
						style="background-color: rgba(1, 203, 226, 0.1); color: #01CBE2; border: 0;height: 35px;">立即购买
					</van-button>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	import {
		getRankListAPI
	} from "@/api/rank.js";
	export default {
		data() {
			return {
				productItems: [],
			}
		},
		methods: {
			onDetail(id) {
				this.$router.push({
					name: "productDetail",
					params: {
						id
					},
				});
			}

		},
		created() {
			getRankListAPI().then(result => {
				this.productItems = result.data;
			}).catch(() => {});
		}
	}
</script>

<style>
	.tp {
		/* width: 5rem; */
		/* height: 5rem; */
		width: 100%;
		border-radius: 0.5rem;
		margin-top: 1rem;
	}

	.wen {
		margin-top: 0.5rem;

	}
</style>
